<template>
  <div>
    <el-col :span="14">
      <div class="nav">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>统计</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-col>
    <el-col :span="24">
      <el-col :span="12"><div id="areaBox_bx"></div></el-col>
      <el-col :span="12"><div id="areaBox_sc"></div></el-col>
    </el-col>
  </div>
</template>

<script>
import * as echarts from "echarts";

import unit from "../../../unit/unit";
export default {
  date() {
    return {
      areaBox_bx: {},
      table: [],
    };
  },
  created() {
    unit.setCookie("mouth", "");
    unit.setCookie("pages", "");
    unit.setCookie("selectdate", "");
    let id = "LXuao";
    this.$axios({
      method: "POST",
      url: "/api/getAlluser",
      data: {
        id: id,
        LoginInfo: JSON.parse(localStorage.isLogin).UAdminPhone,
      },
    }).then((res) => {
      this.table = res.data.data;
      //   console.log(this.table);
      this.getEcharts_bx();
      this.getEcharts_sc();
    });
  },
  mounted() {},
  methods: {
    getEcharts_bx() {
      let date = new Date();
      // console.log(date.getFullYear());
      let year = date.getFullYear();
      this.areaBox_bx = {
        title: {
          text: "车辆保险",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [year + "年购保人数", year + "年已购保人数", "Search Engine"],
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: year + "年购保人数", //总购保人数
            type: "line",
            stack: "Total",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            // data: [],
          },
          {
            name: year + "年已购保人数", //已购保人数
            type: "line",
            stack: "Total",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            // data: [],
          },
        ],
      };
      unit.ech(this.table, "date", this.areaBox_bx, 0);
      unit.ech(this.table, "date", this.areaBox_bx, 1);

      this.chartLineAreaBox = echarts.init(
        document.getElementById("areaBox_bx")
      );
      this.chartLineAreaBox.setOption(this.areaBox_bx);
    },
    getEcharts_sc() {
      let date = new Date();
      // console.log(date.getFullYear());
      let year = date.getFullYear();
      this.areaBox_sc = {
        title: {
          text: "审车",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            year + "年审车人数",
            year + "年已审车人数",
            year + "年≥6年且已审车",
          ],
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: year + "年审车人数", //总审车人数
            type: "line",
            stack: "Total",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: year + "年已审车人数", //总审车人数
            type: "line",
            stack: "Total",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
          {
            name: year + "年≥6年且已审车", //总审车人数
            type: "line",
            stack: "Total",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      unit.ech(this.table, "date_sc", this.areaBox_sc, 0);
      unit.ech(this.table, "date_sc", this.areaBox_sc, 1);
      unit.ech(this.table, "date_sc", this.areaBox_sc, 2);

      this.chartLineAreaBox = echarts.init(
        document.getElementById("areaBox_sc")
      );
      this.chartLineAreaBox.setOption(this.areaBox_sc);
    },
  },
};
</script>

<style>
#areaBox_bx {
  width: 100%;
  height: 40vh;
  /* background: red; */
}
#areaBox_sc {
  width: 100%;
  height: 40vh;
}
</style>